<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <title>HomeSecurity</title>
    <link rel="shortcut icon" href="favicon.ico" >
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
<div class="head">
	<h1 style="white-space: nowrap">HomeSecurity</h1>
	<small>家居安防监控系统</small>
</div>
<!-- top-nav -->
<div class="top-nav-btn">
	<i class="iconfont">&#xe678;</i>
</div>
<ul class="top-nav">
	<li class="active"><a><i class="iconfont">&#xe655;</i>运营首页</a></li>
	<li><a><i class="iconfont">&#xe603;</i>更多信息</a></li>
</ul>
<!-- /top-nav -->
<!-- wrap -->
<div class="wrap">
	<!-- content 01 -->
	<div class="content">
		<!-- side-nav -->
		<ul class="side-nav">
			<li class="active"><a>运营首页</a></li>
		</ul>
		<!-- /side-nav -->
		<!-- main 01 -->
		<div class="main container-fluid">
			<div class="row">
				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
					<div class="panel panel-default">
						<div class="panel-heading">当前燃气<span id="gasLink" class="float-right text-red">离线</span></div>
						<div class="panel-body text-center">
							<img id="gasStatus" class="chartBlock" src="img/gas-off.png" alt="">
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
					<div class="panel panel-default">
						<div class="panel-heading">当前火焰<span id="fireLink" class="float-right text-red">离线</span></div>
						<div class="panel-body">
							<img id="fireStatus" class="chartBlock" src="img/flame-off.png" alt="">
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
					<div class="panel panel-default">
						<div class="panel-heading">当前窗磁<span id="magneticLink" class="float-right text-red">离线</span></div>
						<div class="panel-body">
							<img id="magneticStatus" class="chartBlock" src="img/door-off.png" alt="">
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
					<div class="panel panel-default">
						<div class="panel-heading">当前人体红外<span id="infraredLink" class="float-right text-red">离线</span></div>
						<div class="panel-body">
							<img id="infraredStatus" class="chartBlock" src="img/infrared-off.png" alt="">
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
					<div class="panel panel-default">
						<div class="panel-heading">当前报警器<span id="alertorLink" class="float-right text-red">离线</span></div>
						<div class="panel-body">
							<img id="alertorStatus" class="chartBlock" src="img/alarm-off.png" alt="">
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
					<div class="panel panel-default panel-report">
						<div class="panel-heading">室内异常播报</div>
						<div class="panel-body text-center">
							<div class="form-inline">
								<div class="form-group">
                                    <row>
                                        <span><span class="hidden-sm">间隔</span>时长：</span>
                                        <div class="input-group w150px">
                                            <input id="broadcast" class="form-control" value="10">
                                            <div class="input-group-addon">分钟</div>
                                        </div>
                                        <button id="timerInput" class="btn btn-primary">确定</button>
                                    </row>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default panel-camera">
						<div class="panel-heading">当前IP摄像头<span id="cameraLink" class="float-right text-red">离线</span></div>
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
									<img  id="img1" class="cameraBlock" src="img/camera.jpg">
								</div>
								<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
									<table class="cameraBtn">
										<tr>
											<td></td>
											<td><button id="photo-btn" type="button" class="btn btn-primary btn-block photo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拍照</button></td>
											<td></td>
										</tr>
										<tr>
											<td></td>
											<td><button id="ct_up" type="button" class="btn btn-primary btn-block">上</button></td>
											<td></td>
										</tr>
										<tr>
											<td><button id="ct_left" type="button" class="btn btn-primary btn-block">左</button></td>
											<td><button id="switch" type="button" class="btn btn-danger btn-block">开/关</button></td>
											<td><button id="ct_right" type="button" class="btn btn-primary btn-block">右</button></td>
										</tr>
										<tr>
											<td></td>
											<td><button id="ct_down" type="button" class="btn btn-primary btn-block">下</button></td>
											<td></td>
										</tr>
										<tr>
											<td><button id="ct_v" type="button" class="btn btn-primary btn-block">上下巡航</button></td>
											<td><button id="ct_c" type="button" class="btn btn-primary btn-block">全局巡航</button></td>
											<td><button id="ct_h" type="button" class="btn btn-primary btn-block">左右巡航</button></td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /main 01 -->
	</div>
	<!-- /content 01 -->
	<!-- content 02 -->
	<div class="content" id="myModal">
		<!-- side-nav -->
		<ul class="side-nav">
			<li><a>IDKey</a></li>
			<li><a>MAC设置</a></li>
            <li><a>IP摄像头设置</a></li>
			<li><a>版本信息</a></li>
		</ul>
		<!-- /side-nav -->
		<!-- main 01 -->
		<div class="main container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default IDKEY">
						<div class="panel-heading">IDKey</div>
						<div class="panel-body">
							<div class="form-horizontal" >
								<div class="form-group">
									<label class="col-md-3 col-sm-2 control-label">ID</label>
									<div class="col-md-6 col-sm-9">
										<input id="ID" type="text" class="form-control" value="">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 col-sm-2 control-label">KEY</label>
									<div class="col-md-6 col-sm-9">
										<input id="KEY" type="text" class="form-control" value="">
									</div>
								</div>
                                <div class="form-group">
                                    <label class="col-md-3 col-sm-2 control-label">SERVER</label>
                                    <div class="col-md-6 col-sm-9">
                                        <input id="server" type="text" class="form-control" value="">
                                    </div>
                                </div>
								<div class="form-group">
									<div class="col-md-offset-3 col-sm-offset-2 col-md-2 col-sm-3 col-xs-6">
										<button id="idkeyInput" type="button" class="btn btn-primary btn-block">确认</button>
									</div>
									<div class="col-md-2 col-sm-3 col-xs-6">
										<button type="button" class="btn btn-primary btn-block scan" id="idKey">扫描</button>   <!--用于android版扫描获取id和key，web版无效-->
									</div>
									<div class="col-md-2 col-sm-3 col-xs-6">
										<button type="button" class="btn btn-warning btn-block share" id="idShare" data-toggle="modal" data-target="#qrModal">分享</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /main 01 -->
		<!-- main 02 -->
		<div class="main container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default MAC">
						<div class="panel-heading">MAC设置</div>
						<div class="panel-body">
							<div class="form-horizontal">
								<div class="form-group">
									<label class="col-md-3 col-sm-3 control-label">可燃气体传感器</label>
									<div class="col-md-6 col-sm-9">
										<input id="gasMAC" type="text" class="form-control" value="00:00:00:00:00:00:00:00">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 col-sm-3 control-label">火焰传感器</label>
									<div class="col-md-6 col-sm-9">
										<input id="fireMAC" type="text" class="form-control" value="00:00:00:00:00:00:00:00">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 col-sm-3 control-label">窗磁传感器</label>
									<div class="col-md-6 col-sm-9">
										<input id="magneticMAC" type="text" class="form-control" value="00:00:00:00:00:00:00:00">
									</div>
								</div>
                                <div class="form-group">
                                    <label class="col-md-3 col-sm-3 control-label">人体红外监测传感器</label>
                                    <div class="col-md-6 col-sm-9">
                                        <input id="infraredMAC" type="text" class="form-control" value="00:00:00:00:00:00:00:00">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-sm-3 control-label">声光报警器</label>
                                    <div class="col-md-6 col-sm-9">
                                        <input id="alertorMAC" type="text" class="form-control" value="00:00:00:00:00:00:00:00">
                                    </div>
                                </div>
								<div class="form-group">
									<div class="col-md-offset-3 col-sm-offset-2 col-md-2 col-sm-3 col-xs-6">
										<button id="macInput" type="button" class="btn btn-primary btn-block">确认</button>
									</div>
									<div class="col-md-2 col-sm-3 col-xs-6">
										<button type="button" class="btn btn-primary btn-block scan" id="mac">扫描</button>   <!--用于android版扫描获取mac地址，web版无效-->
									</div>
									<div class="col-md-2 col-sm-3 col-xs-6">
										<button type="button" class="btn btn-warning btn-block share mac-share" id="macShare" data-toggle="modal" data-target="#qrModal">分享</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /main 02 -->
        <!-- main 03 -->
        <div class="main container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">IP摄像头设置</div>
                        <div class="panel-body">
                            <div class="form-horizontal" style="margin: 40px 0;">
                                <div class="form-group">
                                    <label class="col-md-3 col-sm-2 control-label">服务器地址</label>
                                    <div class="col-md-6 col-sm-9">
                                        <input id="cameraServer" type="text" class="form-control" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-sm-2 control-label">摄像头地址</label>
                                    <div class="col-md-6 col-sm-9">
                                        <input id="cameraIP" type="text" class="form-control" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-sm-2 control-label">摄像头类型</label>
                                    <div class="col-md-6 col-sm-9">
                                        <input id="cameraType" type="text" class="form-control" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-sm-2 control-label">用户名</label>
                                    <div class="col-md-6 col-sm-9">
                                        <input id="cameraUser" type="text" class="form-control" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-sm-2 control-label">密码</label>
                                    <div class="col-md-6 col-sm-9">
                                        <input id="cameraPwd" type="text" class="form-control" value="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-offset-3 col-sm-offset-3 col-md-2 col-sm-3 col-xs-6">
                                        <button id="cameraInput" type="button" class="btn btn-primary btn-block">确认</button>
                                    </div>
									<div class="col-md-2 col-sm-3 col-xs-6 ">
										<button type="button" class="btn btn-primary btn-block scan" id="camera">扫描</button>   <!--同上-->
									</div>
									<div class="col-md-2 col-sm-3 col-xs-6">
										<button type="button" class="btn btn-warning btn-block share mac-share" id="cameraShare" data-toggle="modal" data-target="#qrModal">分享</button>
									</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- main 03 -->
		<!-- main 04 -->
		<div class="main container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">版本信息</div>
						<div class="panel-body down-body">
							<div class="show-download" data-toggle="modal" data-target="#downloadModal">查看下载二维码</div>
							<p class="text-center">当前版本：<span class="text-red">v1.2.171011</span></p>
							<div class="form-group">
								<div class="col-lg-offset-5 col-md-offset-4 col-sm-offset-4 col-lg-2 col-md-4 col-sm-4">
									<button id="setUp" type="button" class="btn btn-danger btn-block">版本升级</button>
								</div>
							</div>
                            <div class="form-group">
                                <div class="col-lg-offset-5 col-md-offset-4 col-sm-offset-4 col-lg-2 col-md-4 col-sm-4">
                                    <button type="button" class="btn btn-info btn-block" id="showUpdateTxt" data-toggle="collapse" data-target="#updateTxt">查看升级日志</button>
                                </div>
                            </div>
                            <div id="updateTxt" class="collapse text-center">
								<div><b>v1.2.171011</b> &nbsp;&nbsp;&nbsp;&nbsp;修改二次测试反馈的问题</div><br>
								<div><b>v1.2.170930</b> &nbsp;&nbsp;&nbsp;&nbsp;修改测试反馈的问题</div><br>
								<div><b>v1.2.170921</b> &nbsp;&nbsp;&nbsp;&nbsp;部分交互、状态图片样式统一、config.js生效、添加输入框加密功能、版本日志样式修改、android修改为自动根据系统语言显示中文或英文的app名、android添加确认退出功能、统一localStorage的使用、添加摄像头扫码分享功能</div><br>
								<div><b>v1.2.170819</b> &nbsp;&nbsp;&nbsp;&nbsp;添加检测到人体自动拍照（web）</div><br>
								<div><b>v1.2.170524</b> &nbsp;&nbsp;&nbsp;&nbsp;添加自动连接、二维码兼容、下载二维码版块</div><br>
                                <div><b>v1.2.161209</b> &nbsp;&nbsp;&nbsp;&nbsp;添加localStorage本地保存、分享按钮生成二维码及安卓版本扫码功能</div><br>
								<button class="btn btn-default" id="clear">清除localStorage</button>
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /main 03 -->
	</div>
	<!-- /content 02 -->
</div>
<!-- /wrap -->

<!--模态框：下载二维码窗口-->
<div class="modal fade qrModal" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-body">
				<div class="qr-txt text-center"></div>
				<div class="qr-div text-center">
					<img class="download-qr" src="img/download.png" alt=""/>
				</div>
			</div>
		</div>
	</div>
</div>
<!--模态框：二维码窗口-->
<div class="modal fade qrModal" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-body">
				<div class="qr-txt text-center">请在同款软件的 <br/>“更多信息”-“<span id="shareModalTitle">对应</span>”窗口 <br/>点击“扫描”</div>
				<div class="qr-div text-center">
					<div id="qrDiv"></div>
				</div>
				<div class="qr-txt2">注：仅限于分享ID、KEY和MAC地址</div>
			</div>
		</div>
	</div>
</div>
<!--模态框：确认退出-->
<div class="modal fade imgModal back-modal" id="backModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false"  data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
				<h4 class="modal-title back-text" >确定退出程序？</h4>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" id="confirm_back" onclick="confirm_back()">确认</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>
<!--延时弹出小框-->
<div id="toast">
	<span id="toast_txt">
	</span>
</div>

<!-- 引入 jquery -->
<script   src="js/jquery.min.js"></script>
<!--bootstrap插件-->
<script   src="js/bootstrap.min.js"></script>
<!--qrcode：生成二维码js-->
<script   src="js/qrcode.js"></script>
<!--数据查询-->
<script   src="js/WSN/camera-1.1.js" ></script>
<script   src="js/WSN/WSNCamera.js" ></script>
<script   src="js/WSN/WSNRTConnect.js"></script>
<!--主js-->
<script src="js/config.js"></script>
<script src="js/script.js"></script>

</body>
</html>